1. 自定義函數計算寬高比例
   @function calculate-aspect-ratio($width, $height) {
   @return ($height / $width) * 100%; // 計算比例並返回百分比
   }

.container {
width: 400px;
padding-top: calculate-aspect-ratio(16, 9); // 設定容器的寬高比例
}

• 定義一個名為 calculate-aspect-ratio 的函數，接受寬度和高度作為參數

• 調用 calculate-aspect-ratio 函數，將 16:9 的比例應用到 padding-top，以保持容器的寬高比例

• 編譯後
  .container {
  width: 400px;
  padding-top: 56.25%; /* 這是16:9比例的結果 */
  }

2. 自定義色彩操作函數
   @function adjust-shade($color, $amount) {
   @if ($amount > 0) {
   @return lighten($color, $amount); // 如果數值為正，變亮
   } @else {
   @return darken($color, abs($amount)); // 如果數值為負，變暗
   }
   }

.button {
background-color: adjust-shade(#3498db, -10%); // 調暗顏色
color: #fff;
}

.button:hover {
background-color: adjust-shade(#3498db, 10%); // 懸停時變亮
}

• 定義一個名為 adjust-shade 的函數，接受顏色和調整量作為參數

• 調用 adjust-shade 函數，將按鈕背景顏色調暗 10%

• 編譯後
  .button {
  background-color: #2a7ab9; /* 調暗 10% */
  color: #fff;
  }

.button:hover {
background-color: #5dade2; /* 變亮 10% */
}

內建函數

3. 色彩
   $base-color: #3498db;

.button {
background-color: lighten($base-color, 20%); // 使顏色變亮 20%
border-color: darken($base-color, 10%); // 使顏色變暗 10%
color: complement($base-color); // 取得補色
}

4. 數字
   $base-padding: 10px;

.container {
padding: scale($base-padding, 1.5); // 將 padding 放大 1.5 倍
margin: percentage(0.5); // 將 0.5 轉換成百分比值 50%
}

5. 列表
   $base-padding: 10px;

.container {
padding: scale($base-padding, 1.5); // 將 padding 放大 1.5 倍
margin: percentage(0.5); // 將 0.5 轉換成百分比值 50%
}